<template>
  <div>
    <div class="text-box flex" v-for="item in list" :key="item.id">
      <img :src="item.img" :alt="item.title" @click="toLink(item)">
      <div class="box-right">
        <div class="title-span" @click="toLink(item)">{{ item.title }}</div>
        <div class="text">{{ item.content  }}</div>
        <div class="time">
          <span class="time-dis">{{ item.distanceTime }}</span>
        <span class="time-sec">{{ item.updateTimeInSecond }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from 'vue-router';
const router = useRouter();

withDefaults(defineProps<{
  list?: Array<any>,
  title: string
}>(), {
  popularList: () => {
    return []
  },
  title: ''
})

const toLink = (item: any) => {
  router.push({
    path: `/news/newsDetail/${item.id}`
  })
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
